<template>
  <el-dialog
    class="common-dialog"
    :title="title"
    :visible="showDialog"
    width="750px"
    destroy-on-close
  >
    <el-form
      ref="form"
      class="form"
      :model="form"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="核销码" class="form-item" prop="writeOffCode">
        <el-input
          class="input-item"
          v-model="form.writeOffCode"
          v-focus
          placeholder="请输入或扫码核销码"
          clearable
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="优惠券名称" v-if="form.id>0">
        <el-input
          class="input-item"
          v-model="form.name"
          placeholder=""
          clearable
          maxlength="200"
          disabled
        />
      </el-form-item>
      <el-form-item label="优惠券描述" v-if="form.id>0">
        <el-input
          class="input-item"
          v-model="form.desc"
          placeholder=""
          clearable
          maxlength="200"
          disabled
        />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="searchHeXiaoCode()"> 查找核销码</el-button>
      <el-button type="primary" @click="confirmHeXiao()"> 确认核销</el-button>
      <el-button @click="close()"> 取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { queryOneByWriteOffCode, updateWriteOffPass } from "@/api/cashier/member"

export default {
  props: {
    showDialog: {
      type: [Boolean],
      default: () => false
    }
  },
  // 自动获取焦点
  directives: {
    focus: {
      inserted: function(el) {
        el.querySelector("input").focus()
      }
    }
  },
  watch: {
    showDialog(value) {
      if (value) {
        this.form.id = ""
        this.form.name = ""
        this.form.desc = ""
        this.form.writeOffCode = ""
      }
    }
  },
  data() {
    return {
      title: "优惠券核销",
      loading: false,
      form: { writeOffCode: "", id: '', name: '', desc: '' },
      rules: {
        mobile: [
          { required: true, message: "核销码不能为空", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    confirmDialog() {
      if (this.actionType === "add") {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            this.doAdd()
          } else {
            return false
          }
        })
      } else {
        this.doSwitch()
      }
    },
    searchHeXiaoCode() {
      const writeOffCode = this.form.writeOffCode.trim()
      if (writeOffCode.length > 0) {
        queryOneByWriteOffCode({ writeOffCode: writeOffCode })
          .then((response) => {
            console.log(response)
            if (response.data.data.msg) {
              this.$alert(response.data.data.msg)
            }
            if (response.data.data.dtsCouponUser) {
              this.form.id = response.data.data.dtsCouponUser.id
            }
            if (response.data.data.dtsCoupon) {
              this.form.name = response.data.data.dtsCoupon.name
              this.form.desc = response.data.data.dtsCoupon.desc
            }
          })
          .catch((res) => {
            this.$alert(res.data.msg)
          })
      } else {
        this.$alert("请先输入核销码！")
      }
    },
    confirmHeXiao() {
      if (!this.form.id) {
        this.$alert("请先查找优惠券！")
        return
      }
      const writeOffCode = this.form.writeOffCode.trim()
      if (writeOffCode.length > 0) {
        updateWriteOffPass({ writeOffPass: 1, id: this.form.id })
          .then((response) => {
            console.log(response)
            if (response.data.data==3){
              this.$alert("已经核销过了！")
            }
            if (response.data.data==1){
              this.$alert("核销成功！")
            }
          })
          .catch((res) => {
            this.$alert(res.data.errmsg)
          })
      } else {
        this.$alert("请先输入会员手机号！")
      }
    },
    close() {
      this.$emit("closeHeXiaoDialog")
    }
  }
}
</script>
<style scoped>
.form {
  margin-top: 30px;
}

.input-item >>> .el-input__inner {
  border: #00acac solid 2px;
  line-height: 50px;
  height: 50px;
}

.form-item >>> .el-form-item__label {
  line-height: 50px;
  height: 50px;
}

.member-info {
  border: solid 1px #cccccc;
  padding: 20px;
  border-radius: 4px;
  cursor: pointer;
}

.member-info .item {
  height: 20px;
}

.member-info .item .avatar {
  height: 60px;
  width: 60px;
  border-radius: 30px;
  border: solid 1px #cccccc;
  float: left;
}

.member-info .item .value {
  float: left;
  margin-left: 10px;
  width: 200px;
}
</style>
